<template>
  <AdminLayout>
    <div class="admin-container">
      <div class="page-header">
        <h1>轮播图管理</h1>
        <p class="page-description">管理前端首页的轮播图片展示</p>
      </div>

      <div class="search-actions">
        <button class="primary-button" @click="openAddModal">
          添加轮播图
        </button>
      </div>

      <div class="content-wrapper">
        <!-- 轮播图列表 -->
        <div class="carousel-grid">
          <div 
            v-for="(image, index) in carouselImages" 
            :key="image.id"
            class="carousel-item"
          >
            <div class="carousel-image-container">
              <img 
                :src="image.url" 
                :alt="image.title || '轮播图'"
                class="carousel-image"
                @error="onImageError($event, index)"
              />
              <div class="carousel-overlay">
                <div class="carousel-info">
                  <h3>{{ image.title || '未命名' }}</h3>
                  <p>{{ image.description || '无描述' }}</p>
                </div>
                <div class="carousel-actions">
                  <button class="edit-button" @click="openEditModal(index)">
                    编辑
                  </button>
                  <button class="delete-button" @click="openDeleteModal(index)">
                    删除
                  </button>
                </div>
              </div>
            </div>
            <div class="carousel-controls">
              <label class="control-label">
                <input 
                  type="checkbox" 
                  v-model="image.active"
                  @change="updateImageStatus(index)"
                />
                <span>启用</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="carouselImages.length === 0" class="empty-state">
          <svg width="120" height="120" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 7H21M4 7H9M1 12H23M3 17H21" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <h3>暂无轮播图</h3>
          <p>点击"添加轮播图"按钮开始上传和管理轮播图片</p>
        </div>
      </div>

      <!-- 添加/编辑轮播图弹窗 -->
      <div v-if="showModal" class="modal-overlay" @click="closeModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ editingIndex !== null ? '编辑轮播图' : '添加轮播图' }}</h3>
            <button class="close-button" @click="closeModal">&times;</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="saveCarouselImage">
              <div class="form-group">
                <label>标题 *</label>
                <input 
                  type="text" 
                  v-model="currentImage.title" 
                  required 
                  placeholder="请输入轮播图标题"
                />
              </div>
              <div class="form-group">
                <label>描述</label>
                <textarea 
                  v-model="currentImage.description" 
                  placeholder="请输入轮播图描述"
                  rows="3"
                ></textarea>
              </div>
              <div class="form-group">
                <label>图片选择 *</label>
                <div class="image-upload-container">
                  <div class="upload-option">
                    <label>输入图片URL</label>
                    <input 
                      type="text" 
                      v-model="currentImage.url" 
                      placeholder="请输入轮播图片URL"
                      :class="{ 'required': !currentImage.localFile }"
                    />
                  </div>
                  <div class="upload-option">
                    <label>或上传图片文件</label>
                    <input 
                      type="file" 
                      accept="image/*" 
                      @change="handleImageUpload"
                      ref="fileInput"
                    />
                    <div v-if="currentImage.localFile" class="file-info">
                      已选择文件: {{ currentImage.localFile.name }}
                      <button type="button" class="remove-file" @click="removeLocalFile">移除</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>链接 URL</label>
                <input 
                  type="text" 
                  v-model="currentImage.linkUrl" 
                  placeholder="点击轮播图跳转的链接地址"
                />
              </div>
              <div class="form-group">
                <label>
                  <input 
                    type="checkbox" 
                    v-model="currentImage.active"
                  />
                  <span>启用此轮播图</span>
                </label>
              </div>
              <div class="modal-actions">
                <button type="button" class="secondary-button" @click="closeModal">
                  取消
                </button>
                <button type="submit" class="primary-button">
                  {{ editingIndex !== null ? '保存修改' : '添加' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 删除确认弹窗 -->
      <div v-if="showDeleteModal" class="modal-overlay" @click="closeDeleteModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-button" @click="closeDeleteModal">&times;</button>
          </div>
          <div class="modal-body">
            <p>您确定要删除这条轮播图吗？此操作不可撤销。</p>
            <div class="modal-actions">
              <button type="button" class="secondary-button" @click="closeDeleteModal">
                取消
              </button>
              <button type="button" class="danger-button" @click="deleteCarouselImage">
                确认删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import CarouselStore from '../../services/CarouselStore';
import AdminLayout from './AdminLayout.vue';

export default {
  name: 'CarouselManagement',
  components: {
    AdminLayout
  },
  data() {
    return {
      carouselImages: [],
      showModal: false,
      showDeleteModal: false,
      editingIndex: null,
      currentImage: {
        id: null,
        title: '',
        description: '',
        url: '',
        linkUrl: '',
        active: true,
        createdAt: null,
        localFile: null
      },
      deleteIndex: null
    };
  },
  mounted() {
    this.loadCarouselImages();
  },
  methods: {
    loadCarouselImages() {
      this.carouselImages = CarouselStore.getAllCarouselImages();
    },
    openAddModal() {
      this.editingIndex = null;
      this.currentImage = {
        id: Date.now().toString(),
        title: '',
        description: '',
        url: '',
        linkUrl: '',
        active: true,
        createdAt: new Date().toISOString(),
        localFile: null
      };
      this.showModal = true;
    },
    openEditModal(index) {
      this.editingIndex = index;
      this.currentImage = { ...this.carouselImages[index] };
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.editingIndex = null;
      this.resetCurrentImage();
    },
    resetCurrentImage() {
      this.currentImage = {
        id: null,
        title: '',
        description: '',
        url: '',
        linkUrl: '',
        active: true,
        createdAt: null,
        localFile: null
      };
    },
    
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.currentImage.localFile = file;
        // 这里应该上传图片到服务器，获取URL
        // 简化版：使用本地URL进行预览
        const reader = new FileReader();
        reader.onload = (e) => {
          this.currentImage.url = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    
    removeLocalFile() {
      this.currentImage.localFile = null;
      this.$refs.fileInput.value = '';
      if (!this.editingIndex) {
        this.currentImage.url = '';
      }
    },
    saveCarouselImage() {
      if (this.editingIndex !== null) {
        // 编辑现有轮播图
        CarouselStore.updateCarouselImage(this.currentImage.id, this.currentImage);
      } else {
        // 添加新轮播图
        CarouselStore.addCarouselImage(this.currentImage);
      }
      this.loadCarouselImages();
      this.closeModal();
    },
    openDeleteModal(index) {
      this.deleteIndex = index;
      this.showDeleteModal = true;
    },
    closeDeleteModal() {
      this.showDeleteModal = false;
      this.deleteIndex = null;
    },
    deleteCarouselImage() {
      if (this.deleteIndex !== null) {
        const imageId = this.carouselImages[this.deleteIndex].id;
        CarouselStore.deleteCarouselImage(imageId);
        this.loadCarouselImages();
      }
      this.closeDeleteModal();
    },
    updateImageStatus(index) {
      const image = this.carouselImages[index];
      CarouselStore.updateCarouselImage(image.id, {
        ...image
      });
    },
    onImageError(event, index) {
      // 图片加载失败时显示占位图
      event.target.src = '';
    }
  }
};
</script>

<style scoped>
/* 统一管理页面容器样式 */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 统一标题头部样式 */
.page-header {
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 搜索和操作按钮区域 */
.search-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.primary-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.primary-button:hover {
  background-color: #45a049;
}

/* 轮播图网格布局 */
.carousel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.carousel-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.carousel-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.carousel-item:hover .carousel-image {
  transform: scale(1.05);
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  padding: 15px;
  transition: opacity 0.3s;
  opacity: 1;
}

.carousel-info h3 {
  color: white;
  font-size: 16px;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.carousel-info p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carousel-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.edit-button,
.delete-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.edit-button {
  background-color: #2196F3;
  color: white;
}

.edit-button:hover {
  background-color: #1976D2;
}

.delete-button {
  background-color: #f44336;
  color: white;
}

.delete-button:hover {
  background-color: #d32f2f;
}

.carousel-controls {
  padding: 15px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.control-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-state svg {
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #666;
}

.empty-state p {
  font-size: 14px;
  margin: 0;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  text-align: left;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 20px;
}

/* 图片上传容器样式 */
.image-upload-container {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 4px;
}

.upload-option {
  margin-bottom: 12px;
}

.upload-option:last-child {
  margin-bottom: 0;
}

.upload-option label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #666;
  font-weight: normal;
}

.file-info {
  margin-top: 8px;
  padding: 8px;
  background-color: #e8f5e9;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-file {
  background-color: transparent;
  color: #f44336;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}

.remove-file:hover {
  color: #d32f2f;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2196F3;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.secondary-button,
.danger-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.secondary-button {
  background-color: #f5f5f5;
  color: #333;
}

.secondary-button:hover {
  background-color: #e0e0e0;
}

.danger-button {
  background-color: #f44336;
  color: white;
}

.danger-button:hover {
  background-color: #d32f2f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-container {
    padding: 15px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .search-actions {
    justify-content: center;
  }

  .modal-content {
    width: 95%;
    margin: 10px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}
</style>